<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;

        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
        .el-table__header tr,
        .el-table__header th {
            padding: 0;
            height: 30px;
            line-height: 30px;
        }
        .el-table__body tr,
        .el-table__body td {
            padding: 0;
            height: 80px;
            line-height: 80px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-row :gutter="20">
                <el-col :span="12" :offset="6"><div class="grid-content bg-purple">
                    <div class="demo-input-size">
                        <el-date-picker
                                v-model="input.querDate"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd">
                        </el-date-picker>
                        <el-button icon="el-icon-search" circle @click="searchList"></el-button>
                    </div>
                </div></el-col>
            </el-row>
        </el-header>
        <el-main>
            <el-table
                    :data="resultInfo"
                    border
                    :header-cell-style="{textAlign:'center'}"
                    :cell-style="{textAlign:'center'}"
                    style="width: 100%">
                <el-table-column
                        prop="registrationdate"
                        label="日期"
                        min-width="120">
                </el-table-column>

                <el-table-column
                        prop="aname"
                        label="医师姓名"
                        min-width="100">
                </el-table-column>
                <el-table-column
                        prop="oname"
                        label="科室"
                        min-width="100">
                </el-table-column>
                <el-table-column
                        prop="content"
                        label="病情"
                        min-width="100">
                </el-table-column>
                <el-table-column
                        prop="dealwith"
                        label="处理结果"
                        min-width="100">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="价格"
                        min-width="100">
                </el-table-column>
                <el-table-column
                        label="详情"
                        min-width="100"
                >
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.state==0 & scope.row.dstate==0 " type="text" size="small" @click="myPay(scope.row.id,scope.row.price)" >支付</el-button>
                        <el-button v-if="scope.row.state==0 & scope.row.dstate==0 " type="text" size="small" @click="cancel(scope.row.id)" >取消</el-button>
                        <el-tag v-if="scope.row.dstate==0 & scope.row.state==1 ">预约号码为:{{scope.row.id}}</el-tag>
                        <el-button v-if="scope.row.state==1 & scope.row.dstate==0 " type="text" size="small" @click="outPay(scope.row.id,scope.row.price)">取消挂号</el-button>
                        <el-button v-if="scope.row.state==1 & scope.row.dstate==1 " type="text" size="small" @click="download(scope.row.id)">下载病历</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer>
            <div class="block">
                <span class="demonstration">显示总数</span>
                <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        :page-size="7"
                        layout="total, prev, pager, next"
                        :total="sum">
                </el-pagination>
            </div>
        </el-footer>
    </el-container>

</div>

<script>
    var haha=new Vue({
        el:"#app",
        data:{
            input:{},
            resultInfo:[],
            sum:'',
        },
        methods:{
            searchList(){
                getAll(1,7)
            },
            handleCurrentChange(val){
                getAll(val,7);
            },
            myPay(id,price){
                location.href="/demo/si/pay?id="+id+"&price="+price;
            },
            download(id){
              window.location.href="/demo/resour/indivualDown?id="+id;
            },
            cancel(id){
              if(confirm("确定取消么")){
                  $.get("/demo/result/cancel?id="+id,function (backData) {
                      if(backData.code==1){
                          haha.$message({
                              showClose: true,
                              message: '取消成功',
                              type: 'success'
                          });
                      }
                      window.location.reload();
                  })

              }

            },
            outPay(id,price){
                location.href="/demo/si/out?id="+id+"&price="+price;
            }
        }
    });
    function getAll(a,b){
        haha.input.page=a;
        haha.input.pageCount=b;
        $.post("/demo/result/resultQuery",haha.input,function (backData) {
            haha.resultInfo=backData.data.listAll;
            haha.sum=backData.data.sum;
        })
    }
    getAll(1,7);
</script>
</body>
</html>